<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-layui概述</title>
        <link rel="stylesheet" type="text/css" href="../layui-lib/layui/css/layui.css">
        <!--   layui的核心js文件(采用模块化引入)     -->
        <script src="../layui-lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--
         1.layui的介绍
         layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门楷及低。
         开发成本低，而且该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，
         后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

         2.Layui的特点
            (1) layui属于轻量级框架，简单美观，适用于开发后端框架，它在服务端页面上有非常好的效果。
            (2) layui是提供后端开发人员的ui框架，基于DOM驱动。

         3.目录结构
            css //css目录
             modules //模块css目录 (一般如果模块相对较大，我们会单独提取，比如下面三个:)
                laydate
                layer
                layim
            layui.css //核心样式文件

            font //字体目标目录
            images //图片核心目录
            lay //模块核心目录
                modules //各模块组件
             layui.js  //基础核心库
             layui.all.js //包含layui.js和所有模块的合并文件

            获得layui后，将其完整地部署(拷贝到项目中)到你的项目目录里，你只需要引入下面两个文件
            layui.css
            layui.js


         -->
        <!-- 第一个demo       -->
        <script>
            //还需要声明需要使用的模块和回调函数，参照官方文档，选择自己想要的效果就行。
            //模块和回调函数
            //一般直接写在一个js文件中
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer
                ,form = layui.form;

                layer.msg('Hello World');
            });
        </script>
    </body>
</html>